<template>
  <div class="Paper" v-if="isShows">
    <p class="title">试题详情</p>
    <p class="del" @click="del">×</p>
    <div class="content">
      <div class="topic">
        <div class="picTop">
          <span>{{ stuModul.type }}</span>
          <span style="margin-left: 5px">分值 ：{{ stuModul.scores }}</span>
          <p style="margin-top: 8px" v-html="stuModul.title"></p>
        </div>
        <div
          class="options"
          v-show="stuModul.type == '单选题'"
          v-for="item in stuModul.answers"
          :key="item.id"
        >
          <el-radio
            label="1"
            size="large"
            :class="stuModul.answer === item.answerno ? 'radios' : 'radio'"
            >{{ item.answerno }}：{{ item.content }}</el-radio
          >
        </div>
        <div
          class="options"
          v-show="stuModul.type === '多选题'"
          v-for="item in stuModul.answers"
          :key="item.id"
        >
          <el-checkbox
            label="1"
            size="large"
            :class="
              stuModul.answer.split('|').includes(item.answerno)
                ? 'radios'
                : 'radio'
            "
            >{{ item.answerno }}：{{ item.content }}</el-checkbox
          >
        </div>
        <div class="options" v-if="stuModul.type == '填空题'">
          <div class="radi">
            正确答案<span style="margin-left: 17px">{{ stuModul.answer }}</span>
          </div>
          <div class="expla">答案解析：{{ stuModul.explains }}</div>
        </div>
        <div class="options" v-if="stuModul.type == '判断题'">
          <div class="radi">
            正确答案<span style="margin-left: 17px">{{ stuModul.answer }}</span>
          </div>
        </div>
        <div class="options" v-if="stuModul.type == '问答题'">
          <div class="expla">答案解析：{{ stuModul.explains }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs } from "vue";
import { inject, watch } from "vue";
const data: any = reactive({
  isShows: false,
  stuModul: {},
});
const { isShows, stuModul }: any = toRefs(data);
const datas: any = inject("data");
watch([datas], () => {
  data.stuModul = datas.subObj;
  data.isShows = datas.isShow;
});

// 差号关闭
const del = () => {
  data.isShows = false;
};
</script>
<style scoped>
@import url("../../static/css/test/singlePaper.css");
</style>